<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row>
      <el-card>
        <el-col :span="12" style="height: 320px">
          <div class="grid-content bg-purple">
            <div class="block">
              <img :src="route.imgUrl" style="width: 550px;">
            </div>

          </div>
        </el-col>
        <el-col :span="12" style="height: 320px">
          <div class="grid-content bg-purple-light" style="margin-top: 10px;margin-bottom: 20px">
            <span style="font-size: 25px;color: #0f294d;font-weight: bold">{{route.name}}</span>
            <el-divider></el-divider>
            <p style="font-size: 17px;color: #455873"><i class="el-icon-guide" style="margin-right: 10px"/>{{ route.keywords }}</p>
            <el-divider></el-divider>
            <p style="font-size: 17px;color: #455873"><span class="intro"><i class="el-icon-office-building" style="margin-right: 10px"/>{{ route.details }}</span></p>
            <el-divider></el-divider>
            <span style="font-size: 17px;color: #455873">日期：{{ startDate }}~{{ endDate }}</span>
            <span style="margin-left: 30px;font-size: 17px;color: #455873">全程：{{ dateDiff }} 天</span>
          </div>

        </el-col>
        <div style="font-size: 20px;font-weight: normal">注意事项：</div>
        <div  v-html="route.notice"></div>
      </el-card>

      <el-card style="width: 1200px">
            <div style="overflow: hidden">
              <div style="float: left">
                <div style="text-align: center;font-weight: bold;margin-top: 5px" ><span style="color: #0f294d;font-size: 20px" >{{route.name}}</span></div>
              </div>
              <div style="float: left;margin-left: 250px">
                <el-popover
                    placement="top-start"
                    trigger="hover"
                    content="预订此产品后可快速确认订单">
                  <el-tag slot="reference" >立即确认</el-tag>
                </el-popover>
                <el-popover
                    style="margin-left: 50px"
                    placement="top-start"
                    trigger="hover"
                    content="订单预订成功后不可取消。订单需等门店或供应商确认后生效，
                    订单确认结果以邮件或app通知为准，如订单不确认将全额退款至您的付款账户。">
                  <el-tag slot="reference">不可取消</el-tag>
                </el-popover>
                <span style="color:#409EFF;font-size: 20px;margin-left: 200px;"> ￥{{route.price}}</span>
              </div>
              <el-button  style="margin-right: 100px;float: right" type="warning"  @click="goToPay()">预定</el-button>
            </div>
      </el-card>

    </el-row>

  </div>
</template>

<script>

import moment from 'moment';
export default {
  name: "DetailsView",
  data() {
    return {
      startDate: new Date(),
      endDate: new Date(),
      dateDiff: 1,
      route: {},
      activeIndex: '1',
    }
  },
  methods: {

    goToPay(){
      const startDate=this.formatDate(this.startDate)
      const endDate=this.formatDate(this.endDate)
      this.$router.push({name:'pay',
        params: {info:{categoryId:this.route.categoryId,subjectId:this.route.id,dateDiff:this.dateDiff,
            subject:this.route.name,price:this.route.price,startDate:startDate,endDate:endDate}}})
    },
    //根据ID查询路线详情
    select() {
      let id = new URLSearchParams(location.search).get("id");
      console.log(id)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:8080/v1/routes/" + id + "/list").then((response) => {
        if (response.data.code == 1) {
          this.route = response.data.data;
          this.loadDate();
          console.log(this.route)
        }
      })
    },

    loadDate(){

      this.dateDiff=this.route.days;
      this.startDate=this.route.date;
      let date=new Date(this.startDate)
      this.endDate=this.formatDate(new Date(
          date.getFullYear(),
          date.getMonth(),
          date.getDate()+ this.dateDiff
      ))

    },
    formatDate (d) {
      var date = new Date(d);
      var YY = date.getFullYear() + '-';
      var MM =
          (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-';
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return YY + MM + DD;
    },
  },

  mounted() {
    this.select();
  }
}
</script>

<style scoped>


.el-tag{
  width: 98px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
.el-divider--horizontal{
  margin: 18px 0;
}
.intro{
  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 4; /*显示的行数；如果要设置2行加...则设置为2*/
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
}
</style>